<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>打地鼠小游戏</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            touch-action: manipulation;
        }
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #f0f0f0;
            min-height: 100vh;
            padding: 20px;
            font-family: Arial, sans-serif;
        }
        .game-container {
            max-width: 500px;
            width: 100%;
        }
        .game-info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            font-size: 1.2rem;
        }
        .hammer {
            position: fixed;
            pointer-events: none;
            font-size: 2rem;
            transform: translate(-50%, -50%);
            z-index: 10;
            display: none;
        }
        .mole-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }
        .mole-hole {
            height: 100px;
            background-color: #8b5a2b;
            border-radius: 50%;
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }
        .mole {
            position: absolute;
            bottom: -100px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 2.5rem;
            transition: bottom 0.3s ease;
        }
        .mole.show {
            bottom: 10px;
        }
        .restart-btn {
            margin-top: 20px;
            padding: 10px 20px;
            background-color: #4a89dc;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 1rem;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .restart-btn:hover {
            background-color: #3a79cc;
        }
        .game-over {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.7);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 100;
        }
        .game-over-content {
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            text-align: center;
        }
        .game-over h2 {
            margin-bottom: 20px;
        }
        @media (max-width: 400px) {
            .mole-hole {
                height: 80px;
            }
            .mole {
                font-size: 2rem;
            }
        }
    </style>
</head>
<body>
    <div class="hammer" id="hammer">🔨</div>
    <div class="game-container">
        <div class="game-info">
            <div>分数: <span id="score">0</span></div>
            <div>时间: <span id="time">30</span>s</div>
        </div>
        <div class="mole-grid" id="moleGrid">
            <div class="mole-hole"><div class="mole">🐭</div></div>
            <div class="mole-hole"><div class="mole">🐭</div></div>
            <div class="mole-hole"><div class="mole">🐭</div></div>
            <div class="mole-hole"><div class="mole">🐭</div></div>
            <div class="mole-hole"><div class="mole">🐭</div></div>
            <div class="mole-hole"><div class="mole">🐭</div></div>
            <div class="mole-hole"><div class="mole">🐭</div></div>
            <div class="mole-hole"><div class="mole">🐭</div></div>
            <div class="mole-hole"><div class="mole">🐭</div></div>
        </div>
        <button class="restart-btn" id="restartBtn">开始游戏</button>
    </div>
    <div class="game-over" id="gameOver">
        <div class="game-over-content">
            <h2>游戏结束!</h2>
            <p>你的最终得分: <span id="finalScore">0</span></p>
            <button class="restart-btn" id="playAgainBtn">再玩一次</button>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const moleGrid = document.getElementById('moleGrid');
            const scoreElement = document.getElementById('score');
            const timeElement = document.getElementById('time');
            const restartBtn = document.getElementById('restartBtn');
            const playAgainBtn = document.getElementById('playAgainBtn');
            const gameOverScreen = document.getElementById('gameOver');
            const finalScoreElement = document.getElementById('finalScore');
            const hammer = document.getElementById('hammer');
            const moleHoles = document.querySelectorAll('.mole-hole');
            const moles = document.querySelectorAll('.mole');

            let score = 0;
            let time = 30;
            let gameTimer;
            let moleTimer;
            let isPlaying = false;

            // 显示锤子动画
            function showHammer(event) {
                if (!isPlaying) return;
                const x = event.clientX;
                const y = event.clientY;
                hammer.style.left = `${x}px`;
                hammer.style.top = `${y}px`;
                hammer.style.display = 'block';
                hammer.style.transform = 'translate(-50%, -50%) rotate(-45deg)';

                setTimeout(() => {
                    hammer.style.transform = 'translate(-50%, -50%) rotate(0deg)';
                    setTimeout(() => {
                        hammer.style.display = 'none';
                    }, 100);
                }, 150);
            }

            // 随机显示地鼠
            function showRandomMole() {
                // 先隐藏所有地鼠
                moles.forEach(mole => mole.classList.remove('show'));

                if (!isPlaying) return;

                // 随机选择一个地鼠洞
                const randomIndex = Math.floor(Math.random() * moleHoles.length);
                const randomMole = moles[randomIndex];
                randomMole.classList.add('show');

                // 随机时间后隐藏地鼠
                const hideTime = Math.random() * 1000 + 500;
                setTimeout(() => {
                    if (randomMole.classList.contains('show')) {
                        randomMole.classList.remove('show');
                    }
                }, hideTime);
            }

            // 打地鼠事件
            function hitMole(event) {
                if (!isPlaying) return;
                const mole = event.currentTarget.querySelector('.mole');
                if (mole.classList.contains('show')) {
                    mole.classList.remove('show');
                    score += 10;
                    scoreElement.textContent = score;
                    // 加分动画
                    const scorePopup = document.createElement('div');
                    scorePopup.textContent = '+10';
                    scorePopup.style.position = 'absolute';
                    scorePopup.style.top = '-20px';
                    scorePopup.style.left = '50%';
                    scorePopup.style.transform = 'translateX(-50%)';
                    scorePopup.style.color = 'red';
                    scorePopup.style.fontWeight = 'bold';
                    scorePopup.style.animation = 'popup 0.5s ease-out';
                    event.currentTarget.appendChild(scorePopup);
                    setTimeout(() => scorePopup.remove(), 500);
                }
            }

            // 开始游戏
            function startGame() {
                score = 0;
                time = 30;
                isPlaying = true;
                scoreElement.textContent = score;
                timeElement.textContent = time;
                restartBtn.textContent = '重新开始';
                gameOverScreen.style.display = 'none';

                // 清除之前的定时器
                if (gameTimer) clearInterval(gameTimer);
                if (moleTimer) clearInterval(moleTimer);

                // 启动地鼠定时器
                moleTimer = setInterval(showRandomMole, 800);

                // 启动游戏计时器
                gameTimer = setInterval(() => {
                    time--;
                    timeElement.textContent = time;
                    if (time <= 0) {
                        endGame();
                    }
                }, 1000);
            }

            // 结束游戏
            function endGame() {
                isPlaying = false;
                clearInterval(gameTimer);
                clearInterval(moleTimer);
                // 隐藏所有地鼠
                moles.forEach(mole => mole.classList.remove('show'));
                // 显示游戏结束画面
                finalScoreElement.textContent = score;
                gameOverScreen.style.display = 'flex';
            }

            // 添加事件监听
            moleHoles.forEach(hole => hole.addEventListener('click', hitMole));
            document.addEventListener('click', showHammer);
            restartBtn.addEventListener('click', startGame);
            playAgainBtn.addEventListener('click', startGame);
        });
    </script>
</body>
</html>